 模板
<template>
  <div class="basic-info-maintenance">
    <!-- 轮播图 -->
    <el-carousel :interval="5000" arrow="always" height="400px" class="carousel-container">
      <el-carousel-item v-for="(slide, index) in slides" :key="index" class="carousel-item">
        <img :src="slide.src" alt="slide.alt" class="carousel-image" />
      </el-carousel-item>
    </el-carousel>

    <el-row :gutter="20" class="info-row">
      <el-col :sm="24" :lg="12">
        <el-card class="info-card">
          <div slot="header" class="clearfix">
            <span>学校基础信息</span>
            <el-button type="primary" size="mini" style="float: right;" @click="openEditDialog">编辑</el-button>
          </div>
          <el-form label-width="100px">
            <el-form-item label="学校名称">
              <el-tag>{{ schoolInfo.schoolName }}</el-tag>
            </el-form-item>
            <el-form-item label="学校类型">
              <el-tag>{{ schoolInfo.schoolType }}</el-tag>
            </el-form-item>
            <el-form-item label="学校地址">
              <el-tag>{{ schoolInfo.address }}</el-tag>
            </el-form-item>
            <el-form-item label="学校联系人">
              <el-tag>{{ schoolInfo.contactName }}</el-tag>
            </el-form-item>
            <el-form-item label="联系方式">
              <el-tag>{{ schoolInfo.contactNumber }}</el-tag>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
      <el-col :sm="24" :lg="12">
        <el-card class="info-card logo-card">
          <img :src="schoolLogo" alt="学校LOGO" class="logo-image">
        </el-card>
      </el-col>
    </el-row>

    <!-- 编辑对话框 -->
    <el-dialog title="编辑学校信息" :visible.sync="dialogVisible" width="30%">
      <el-form :model="editForm">
        <el-form-item label="学校名称">
          <el-input v-model="editForm.schoolName"></el-input>
        </el-form-item>
        <el-form-item label="学校类型">
          <el-input v-model="editForm.schoolType"></el-input>
        </el-form-item>
        <el-form-item label="学校地址">
          <el-input v-model="editForm.address"></el-input>
        </el-form-item>
        <el-form-item label="学校联系人">
          <el-input v-model="editForm.contactName"></el-input>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="editForm.contactNumber"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveInfo">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {getSchoolinfo,updateSchoolinfo} from '@/api/jwgl/schoolinfo';

// 定义组件默认数据和方法
export default {
  name: "BasicInfoMaintenance",
  data() {
    return {
      // 学校基本信息
      schoolInfo: {
        schoolName: "新学道测试学校",
        schoolType: "民办",
        address: "山西省晋中市榆次区XXXX街XXX号",
        contactName: "请输入学校联系人",
        contactNumber: "请输入联系方式"
      },
      // 学校LOGO路径
      schoolLogo: require('@/assets/logo/logo.jpg'), // 假设您的学校LOGO位于此路径
      // 编辑对话框显示状态
      dialogVisible: false,
      // 编辑表单数据
      editForm: {
        schoolName: '',
        schoolType: '',
        address: '',
        contactName: '',
        contactNumber: ''
      },
      // 轮播图数据
      slides: [
        { src: require('@/assets/images/bg.jpeg'), alt: 'Slide 1' },
        { src: require('@/assets/images/bg2.jpeg'), alt: 'Slide 2' },
        { src: require('@/assets/images/bg3.jpeg'), alt: 'Slide 3' }
      ]
    };
  },
  created() {
    this.fetchSchoolInfo(1);
  },
  methods: {
    // 查询学校基础信息详细
    fetchSchoolInfo(id) {
      getSchoolinfo(id)
        .then(response => {
          this.schoolInfo = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    },

    // 打开编辑对话框并初始化表单数据
    openEditDialog() {
      this.dialogVisible = true; // 打开对话框
      this.editForm = { ...this.schoolInfo };
    },
    // 保存编辑表单数据并关闭对话框
    saveInfo() {
      updateSchoolinfo(this.editForm).then(response => {
        this.$modal.msgSuccess("修改成功");
        this.dialogVisible = false; // 关闭对话框
        this.fetchSchoolInfo(1); // 刷新学校信息
      });
    }
  }
};
</script>

<style scoped>
.basic-info-maintenance {
  padding: 20px;
}
.carousel-container {
  margin-bottom: 20px;
}
.carousel-item {
  display: flex;
  justify-content: center;
  align-items: center;
}
.carousel-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}
.info-row {
  display: flex;
  align-items: center;
}
.info-card {
  height: 400px;
  margin-bottom: 20px;
}
.logo-card {
  height: 400px;
}
.logo-image {
  width: 100%;
  height: auto;
}
</style>
